<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机购买页面测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .test-container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 500px;
            width: 90%;
        }
        
        .test-icon {
            font-size: 4em;
            margin-bottom: 20px;
        }
        
        .test-title {
            font-size: 2em;
            color: #333;
            margin-bottom: 15px;
        }
        
        .test-description {
            color: #666;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .test-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 10px;
        }
        
        .test-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        
        .test-button.secondary {
            background: #6c757d;
        }
        
        .test-button.success {
            background: #28a745;
        }
        
        .feature-list {
            text-align: left;
            margin: 30px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
        }
        
        .feature-list h3 {
            color: #333;
            margin-bottom: 15px;
        }
        
        .feature-list ul {
            list-style: none;
        }
        
        .feature-list li {
            padding: 8px 0;
            color: #666;
            position: relative;
            padding-left: 25px;
        }
        
        .feature-list li:before {
            content: "✅";
            position: absolute;
            left: 0;
        }
        
        .instructions {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 20px;
            margin: 20px 0;
            border-radius: 0 10px 10px 0;
        }
        
        .instructions h4 {
            color: #1976d2;
            margin-bottom: 10px;
        }
        
        .instructions ol {
            color: #666;
            padding-left: 20px;
        }
        
        .instructions li {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <div class="test-icon">📱</div>
        <h1 class="test-title">手机购买页面测试</h1>
        <p class="test-description">
            测试手机购买页面的功能，包括商品展示、搜索筛选、购买流程等
        </p>
        
        <div class="feature-list">
            <h3>已实现功能：</h3>
            <ul>
                <li>手机商品展示网格</li>
                <li>搜索和筛选功能</li>
                <li>商品详情展示</li>
                <li>购买确认流程</li>
                <li>库存管理</li>
                <li>响应式设计</li>
                <li>购物车功能</li>
                <li>分页显示</li>
            </ul>
        </div>
        
        <div class="instructions">
            <h4>测试步骤：</h4>
            <ol>
                <li>点击"打开手机购买页面"按钮</li>
                <li>浏览手机商品列表</li>
                <li>使用搜索和筛选功能</li>
                <li>点击商品卡片查看详情</li>
                <li>尝试购买流程</li>
                <li>测试响应式布局</li>
            </ol>
        </div>
        
        <div>
            <button class="test-button" onclick="openPhonePurchasePage()">
                📱 打开手机购买页面
            </button>
            <button class="test-button secondary" onclick="goBack()">
                🏠 返回首页
            </button>
            <button class="test-button success" onclick="testFeatures()">
                🧪 测试功能
            </button>
        </div>
        
        <div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
            <h4 style="color: #333; margin-bottom: 10px;">测试结果：</h4>
            <div id="test-results" style="color: #666; font-size: 14px;">
                点击测试功能按钮查看结果...
            </div>
        </div>
    </div>

    <script>
        // 打开手机购买页面
        function openPhonePurchasePage() {
            const pageManager = window.pageManager;
            if (pageManager && pageManager.showPhonePurchasePage) {
                pageManager.showPhonePurchasePage();
            } else {
                alert('页面管理器未找到或手机购买页面功能未实现');
            }
        }
        
        // 返回首页
        function goBack() {
            const pageManager = window.pageManager;
            if (pageManager && pageManager.showHomePage) {
                pageManager.showHomePage();
            } else {
                alert('页面管理器未找到');
            }
        }
        
        // 测试功能
        function testFeatures() {
            const results = document.getElementById('test-results');
            let testResults = [];
            
            // 测试页面管理器
            if (window.pageManager) {
                testResults.push('✅ 页面管理器已加载');
            } else {
                testResults.push('❌ 页面管理器未找到');
            }
            
            // 测试手机购买页面方法
            if (window.pageManager && window.pageManager.showPhonePurchasePage) {
                testResults.push('✅ 手机购买页面方法已实现');
            } else {
                testResults.push('❌ 手机购买页面方法未实现');
            }
            
            // 测试Vue组件
            if (window.pageManager && window.pageManager.showHomePage) {
                testResults.push('✅ Vue组件系统正常');
            } else {
                testResults.push('❌ Vue组件系统异常');
            }
            
            // 测试本地存储
            if (typeof localStorage !== 'undefined') {
                testResults.push('✅ 本地存储功能正常');
            } else {
                testResults.push('❌ 本地存储功能异常');
            }
            
            // 测试网络请求
            if (typeof fetch !== 'undefined') {
                testResults.push('✅ 网络请求功能正常');
            } else {
                testResults.push('❌ 网络请求功能异常');
            }
            
            results.innerHTML = testResults.join('<br>');
        }
        
        // 页面加载时自动测试
        window.addEventListener('load', function() {
            setTimeout(testFeatures, 1000);
        });
    </script>
</body>
</html> 